{% extends "base_tmp.html" %}


{% block content %}
<div class="container" style="margin-top:76px">
    <div class="row wow fadeIn" data-wow-delay="0.6s">
        {#    分类条件栏    #}
        <div class="col-md-12 table-responsive">
            <table class="table text-left table-bordered" id="arttags">
                <tr>
                    <td class="bg-primary"><a href="{% url 'art:classify' %}?tid=0"><h5 style="color: white">全部类型</h5></a></td>
                    <td>
                        <ul class="list-inline ">
                        {% for tag in tags %}
                            <li><a class="label label-info" href="?tid={{ tag.id }}&hot={{ hot }}&price={{ price }}&time={{ time }}"><span class="glyphicon glyphicon-tag"></span>{{tag.t_name}}</a></li>
                        {% endfor %}
                    </ul>
                    </td>
                </tr>

                <tr>
                    <td class="bg-primary"><h5 >热度排序</h5></td>
                    <td>
                        <ul class="list-inline ">
                            <li><a  class="label label-info " href="?hot=0&price={{ price }}&time={{ time }}&tid={{ tid }}"><span class="glyphicon glyphicon-tag"></span>由高到低</a></li>
                            <li><a class="label label-info" href="?hot=1&price={{ price }}&time={{ time }}&tid={{ tid }}"><span class="glyphicon glyphicon-tag"></span>由低到高</a></li>
                        </ul>
                    </td>
                </tr>

                <tr>
                    <td class="bg-primary"><h5 >价格排序</h5></td>
                    <td>
                        <ul class="list-inline ">
                            <li><a class="label label-info" href="?price=0&hot={{ hot }}&time={{ time }}&tid={{ tid }}"><span class="glyphicon glyphicon-tag"></span>由高到低</a></li>
                            <li><a class="label label-info" href="?price=1&hot={{ hot }}&time={{ time }}&tid={{ tid }}"><span class="glyphicon glyphicon-tag"></span>由低到高</a></li>
                            <li><form action="{% url 'art:classify' %}?tid={{ tid }}"><span>价格区间:&nbsp</span><input type="text"  style="width: 50px;" placeholder="10" name="min_price"><span>-</span><input type="text"  style="width: 50px;" placeholder="50" name="max_price"><button type="submit" class="bg-info">搜索</button></form></li>
                        </ul>
                    </td>
                </tr>

                <tr>
                    <td class="bg-primary"><h5 >时间排序</h5></td>
                    <td>
                        <ul class="list-inline ">
                            <li><a class="label label-info" href="?time=0&hot={{ price }}&price={{ price }}&tid={{ tid }}"><span class="glyphicon glyphicon-tag"></span>由高到低</a></li>
                            <li><a class="label label-info" href="?time=1&hot={{ price }}&price={{ price }}&tid={{ tid }}"><span class="glyphicon glyphicon-tag"></span>由低到高</a></li>
                        </ul>
                    </td>
                </tr>
            </table>
        </div>

        {#    分类结果栏    #}
        <div class="col-md-10">
            {% for art in  arts_page %}
                <div class="col-md-2" style="margin-bottom: 20px">
                    <div class=" text-center" style="width:150px">
                        <img src="/static/imgs/full/{{art.a_img_url_figer}}.jpg" style="width:100%;height:200px;" class="img-responsive center-block lazy" alt="">
                        <div class="" style="width:100%;">
                            <div style="color: #0f0f0f;height: 30px; font-weight: bold" class="text-center">{{art.a_title}}</div>
                            <div style="color: #0f0f0f;height: 30px; font-weight: bold" class="text-center">评分:{{ art.hot }}&nbsp;&nbsp;&nbsp;&nbsp;价格:{{ art.a_price }}元</div>
                            <div style="height: 20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap">{{art.a_info}}</div>
                        </div>
                        <div style="width: 100%" class="text-center" >
                            <a href="{% url 'art:detail' %}?id={{art.id}}" class="btn btn-primary" target="_blank" role="button" style="width: 100%"><span class="glyphicon glyphicon-eye-open"></span>&nbsp;阅读</a>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>

        {#    数据个数栏    #}
        <div class="col-md-2">
            <h4 style="color: red">商品个数:{{ arts_count }}</h4>
        </div>
        {#    分页按钮组栏    #}
        <div class="col-md-12 text-center" style="margin-top:12px;">
            <div class="text-center">
                <ul class="pagination ">
                    {% if arts_page.has_previous  %}
                        <li><a href="?page={{ arts_page.previous_page_number }}">&laquo;上一页</a></li>
                    {% else %}
                        <li class="disabled"><a>&laquo;上一页</a></li>
                    {% endif %}
                    {% for pindex in pages %}
                        <li {% if pindex == arts_page.number %}class="active"{% endif %}><a href="?page={{  pindex }}" >{{ pindex }}</a></li>
                    {% endfor %}
                    {% if arts_page.has_next %}
                        <li><a href="?page={{ arts_page.next_page_number }}">下一页&raquo;</a></li>
                    {% else %}
                        <li class="disabled"><a>下一页&raquo;</a></li>
                    {% endif %}
                </ul>
            </div>
        </div>
    </div>
</div>

{% endblock %}






{% block js %}
<script>
    $(document).ready(function(){
        $("#curtag{{t}}").attr("class","label label-danger");
    });
</script>


{% endblock %}
